<template>
  <div>
    <div style="background-color: ghostwhite;padding: 10px 15px;">
        <draggable
          v-model="tools"
          v-bind="{
            group: 'widgetConfig',
            ghostClass: 'ghost',
            animation: 200,
          }"
          class="widget-form-list"
          handle=".config-move"
        >
          <div
            class="config-options margin-bottom-sm"
            v-for="(opt, o) in tools"
            :key="o"
          >
            <i
              class="designer-icon config-move"
              style="font-size: 18px;cursor:move;"
              >&#xe627;</i
            >
            <span class="margin-left-lg" style="font-size:18px;">{{
              opt.label
            }}</span>
            <i
              class="designer-icon margin-left-lg"
              @click="editTools(opt, o)"
              style="cursor:pointer;font-size: 18px;color: #f5222d"
              >&#xe60e;</i
            >
            <i
              class="designer-icon margin-left-lg"
              @click="delTools(opt, o)"
              style="cursor:pointer;font-size: 18px;color: #f5222d"
              >&#xe665;</i
            >
          </div>
        </draggable>

        <div class="margin-left-sm margin-tb-lg">
          <a @click="addTools()" class="designer-icon">&#xe655;添加按钮</a>
        </div>
      </div>
      <tools-add ref="toolsAdd" @success="success"/>
  </div>
</template>
<script>
import toolsAdd from './toolsAdd.vue'
export default {
  components: { toolsAdd },
  data() {
    return {
      tools: []
    }
  },
  watch: {
    tools: {
      handler() {
        this.change()
      },
      deep: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    init(toolsArray) {
      this.tools = toolsArray
    },
    addTools() {
      this.$refs.toolsAdd.showModal()
    },
    editTools(item, idx) {
      this.$refs.toolsAdd.showModal(item, idx)
    },
    delTools(item, idx) {
      this.tools.splice(idx, 1)
    },
    success(item, idx) {
      if (idx > -1) {
        this.tools[idx] = item
        this.tools = JSON.parse(JSON.stringify(this.tools))
      } else {
        this.tools.push(item)
      }
    },
    change() {
      this.$emit('change', this.tools)
    }
  }
}
</script>
<style></style>
